<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--   1.修饰符 lazy     会在input失去焦点或者敲击回车时候再进行变量更新-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>



<!--  2.修饰符 number-->
  <input type="number" v-model.number="age">
  <h2>{{age}}---{{typeof age}}</h2>


<!--  3.trim  修饰符    用来消除过滤左右两边的空格-->
  <input type="text" v-model.trim="name">
  <h2>您输入的名字是：{{name}}</h2>

</div>


<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好呀',
            age:0,
            name:'',
        }
    })
</script>
</body>
</html>